<!DOCTYPE html>
<html lang="en">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  <link rel="icon" href="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
  <title>Vuex 的食用方法 | 小崔的博客</title>
  <meta name="author" content="cuishikang" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="Vue, Vuex" />
  
  <meta name="description" content="::: tip 介绍Vuex 的操作流程:::">
<meta property="og:type" content="article">
<meta property="og:title" content="Vuex 的食用方法">
<meta property="og:url" content="https://cuishikang.gitee.io/2021/06/29/Vue/2_Vuex/index.html">
<meta property="og:site_name" content="小崔的博客">
<meta property="og:description" content="::: tip 介绍Vuex 的操作流程:::">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta property="article:published_time" content="2021-06-28T16:00:00.000Z">
<meta property="article:modified_time" content="2022-02-19T10:22:58.541Z">
<meta property="article:author" content="cuishikang">
<meta property="article:tag" content="Vue">
<meta property="article:tag" content="Vuex">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta name="twitter:site" content="@null">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" type="text/css" media="all">
  
  
  <link rel="stylesheet" id="fontawe-css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
  <link rel="stylesheet" id="nprogress-css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" type="text/css" media="all">
  
  
    <link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css">
  
  
    <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="https://unpkg.com/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
      .kratos-cover.kratos-cover-2 {
        background-image: url('/images/banner.webp');
      }
    
    
      @media(min-width:768px) {
        body.custom-background {
          background-image: url('/images/bg.webp');
        }
      }
    
  </style>
  
<meta name="generator" content="Hexo 6.0.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                        <li><a href="/"><i class="fa fa-home"></i>首页</a></li>
                                    
                                
                                    
                                        <li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                    
                                
                                    
                                        <li><a href="/friends/"><i class="fa fa-paw"></i>好伙伴</a></li>
                                    
                                
                                    
                                        <li>
                                            <a><i class="fa fa-link"></i>关于本人</a>
                                            <ul class="sub-menu">
                                                
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang"><i class="fa fa-git"></i>码云</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang/tmp/raw/master/img/2201645358312_.pic.jpg"><i class="fa fa-weixin"></i>微信</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/fu-xi-ting-67-17-5"><i class="fa  fa-search"></i>知乎</a></li>
                                                    
                                                
                                                    
                                                        <li><a href="http://cuishikang.gitee.io/my_resume/#/"><i class="fa  fa-file-o"></i>简历</a></li>
                                                    
                                                
                                            </ul>
                                        </li>
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">小崔的博客</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>小崔的博客</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article>
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center">Vuex 的食用方法</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><i class="fa fa-calendar"></i> 2021-06-29</li>
                <li><i class="fa fa-user"></i> 作者 cuishikang</li>
                <li>
                    <i class="fa fa-edit"></i> 
                    
                    
                        ~30.55K
                    
                    字
                </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                本文最后编辑于 <time datetime="1645266178541"></time> 前，其中的内容可能需要更新。
            </div>
            
            <hr />
            <p>::: tip 介绍<br>Vuex 的操作流程<br><br>:::</p>
<span id="more"></span>

<h1 id="Vue2中Vuex"><a href="#Vue2中Vuex" class="headerlink" title="Vue2中Vuex"></a>Vue2中Vuex</h1><h2 id="关于VueX"><a href="#关于VueX" class="headerlink" title="关于VueX"></a>关于<code>VueX</code></h2><p><code>VueX</code>是适用于在<code>Vue</code>项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步<code>data</code>中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，<code>Vue</code>为这些被多个组件频繁使用的值提供了一个统一管理的工具——<code>VueX</code>。在具有<code>VueX</code>的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用</p>
<blockquote>
<p>学习目标: <font color =#ff3040> 掌握Vuex的五个单一状态树 </font>(state,mutations,action,getters,modules)</p>
</blockquote>
<h2 id="组件之间传值"><a href="#组件之间传值" class="headerlink" title="组件之间传值"></a>组件之间传值</h2><p><a target="_blank" rel="noopener" href="https://vuex.vuejs.org/zh/api/#vuex-store">VuexAPI 参考</a></p>
<blockquote>
<p>目标：熟悉组件之间传值的各种情况（关注非父子之间传值）</p>
</blockquote>
<ul>
<li>父组件向子组件传值 props</li>
<li>子组件向父组件传值 $emit</li>
<li>非父子组件之间传值 : 爷孙；兄弟<ul>
<li>发布订阅模式 , 就称之为组件之间传值(需要有一个中介)</li>
</ul>
</li>
</ul>
<p><img src="https://i.loli.net/2021/06/18/XhCStJlmnbfvIip.png" alt="image-20210121084735174"></p>
<h2 id="兄弟组件简单传值方式-发布中介"><a href="#兄弟组件简单传值方式-发布中介" class="headerlink" title="兄弟组件简单传值方式(发布中介)"></a>兄弟组件简单传值方式(发布中介)</h2><blockquote>
<p>第一步 先new Vue() 全局Vue实例化对象(中介) 通常设置在总入口文件</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//! 创建一个Vue实例对象</span></span><br><span class="line"><span class="keyword">const</span> eventBus = <span class="keyword">new</span> <span class="title class_">Vue</span>()</span><br><span class="line"><span class="comment">//! 把创建的Vue对象添加到Vue构造函数的原型上，那么所有的组件都可以获取该对象</span></span><br><span class="line"><span class="comment">//! 所有的组件都是Vue构造函数的实例 (名称可以自定义)</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">eventBus</span> = eventBus</span><br></pre></td></tr></table></figure>

<blockquote>
<p>第二步 在Vue中设置 设置数值 接收数值 <code>script</code>脚本 <code>methods:</code>方法</p>
</blockquote>
<ul>
<li>msg是在data()中 设置的数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">  <span class="comment">// 设置一个兄弟组件的值(点击事件)</span></span><br><span class="line">  handleClick () &#123;</span><br><span class="line">    <span class="comment">// vue中使用 $emit(eventName) 触发事件，</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">eventBus</span>.$emit(<span class="string">&#x27;msg-abc&#x27;</span>, <span class="variable language_">this</span>.<span class="property">msg</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>第三步 在兄弟组件中 接收传来的数值 <code>script</code>脚本 <code>created()</code>生命周期</p>
</blockquote>
<ul>
<li>receiveMsg是在data()中 设置的数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">created () &#123;</span><br><span class="line">  <span class="comment">// 使用 $on(eventName) 监听事件</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">eventBus</span>.$on(<span class="string">&#x27;msg-abc&#x27;</span>, <span class="function"><span class="params">ret</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">receiveMsg</span> = ret</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="Vuex状态管理必要性分析"><a href="#Vuex状态管理必要性分析" class="headerlink" title="Vuex状态管理必要性分析"></a>Vuex状态管理必要性分析</h2><ul>
<li>Vuex 是一个专为 Vue.js 应用程序开发的<strong>状态管理模式</strong>。它采用集中式存储管理应用的所有组件的状态，并以相应的<strong>规则</strong>保证状态以一种可预测的方式发生变化。</li>
<li>如果使用了Vuex，就可以<strong>非常方便</strong>的进行复杂的组件之间数据传递（非父子关系）</li>
</ul>
<blockquote>
<p><img src="https://tva2.sinaimg.cn/large/005INI3Xly8grmau56oncj30iq08277j.jpg" alt="Snipaste_2021-06-18_09-44-12"></p>
</blockquote>
<p>总结：</p>
<ol>
<li>所有组件的数据进行统一管理（存储和变更），每个组件内部就不再需要维护这些数据了</li>
<li>数据变更时，统一修改Store中数据即可，组件中用到这个数据的组件会自动更新（数据是响应式的）</li>
</ol>
<h2 id="Vuex的实现原理"><a href="#Vuex的实现原理" class="headerlink" title="Vuex的实现原理"></a>Vuex的实现原理</h2><blockquote>
<p>目标：熟悉Vuex是如何实现上述集中管理组件数据这种思想（模式）的</p>
</blockquote>
<p><img src="https://i.loli.net/2021/06/18/kRCPx5DBYwNypVd.png" alt="image-20210119224725242"></p>
<ul>
<li>state 管理组件数据，管理的数据是响应式的，当数据改变时驱动视图更新。</li>
<li>mutations 更新数据，state中的数据只能使用mutations去改变数据（只能处理同步的场景）</li>
<li>actions 请求数据，响应成功后把数据提交给mutations 进而更新state（可以处理异步的场景 接口获取的数据）</li>
<li>Devtools指的是浏览器的Vue插件调试工具 他可以监控数据的所有变更操作</li>
</ul>
<p><img src="https://i.loli.net/2021/06/18/Ivyd1EQ4mbxBG8c.png" alt="image-20210123111136131"></p>
<ul>
<li>getters相当于在State和组件之间添加一个环节（对state中的数据进行加工处理后再提供给组件）</li>
<li>getters不要修改state中的数据</li>
</ul>
<h2 id="Vuex的安装"><a href="#Vuex的安装" class="headerlink" title="Vuex的安装"></a>Vuex的安装</h2><ul>
<li>单独 npm Vuex包</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i vuex --save/-S</span><br></pre></td></tr></table></figure>

<ul>
<li>在脚手架中安装</li>
</ul>
<p><img src="https://tva2.sinaimg.cn/large/005INI3Xly8groqcnpbzyj30c105pwec.jpg" alt="image-20210618121505711"></p>
<h2 id="储存数据-state"><a href="#储存数据-state" class="headerlink" title="储存数据 state"></a>储存数据 <code>state</code></h2><p><a target="_blank" rel="noopener" href="https://vuex.vuejs.org/zh/guide/state.html">储存数据 state</a></p>
<blockquote>
<p>状态state用于存储所有组件的数据。</p>
</blockquote>
<ul>
<li><p><font color = #ff3040>导入Vuex的<code>state</code>时候数据已经保存到了<code>computed</code>当中 无需在data()里面再次储存 直接拿来调用即可 </font></p>
</li>
<li><p>用于储存Vuex里面的数据</p>
</li>
<li><p><font color = #ff3040>注意: 此方法写在 Vue计算属性<code>computed:</code> 里面</font></p>
</li>
</ul>
<h3 id="定义-state管理数据"><a href="#定义-state管理数据" class="headerlink" title="定义 state管理数据"></a>定义 <code>state</code>管理数据</h3><ul>
<li>设置state管理数据 <code>store文件夹 中 index.js</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入Vuex</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vuex</span> <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Vuex</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 导出store实例化对象(Vuex) 调用时 $store</span></span><br><span class="line"><span class="comment">// 初始化vuex对象</span></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> vuex.<span class="title class_">Store</span>(&#123;</span><br><span class="line">     <span class="comment">// state: 储存组件的所有数据</span></span><br><span class="line">  <span class="attr">state</span>: &#123;</span><br><span class="line">    <span class="comment">// 管理数据</span></span><br><span class="line">    <span class="attr">count</span>: <span class="number">0</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li>在Vue文件 调用state储存的数据 <code>template</code>模板</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;A组件 state的数据：&#123;&#123;$store.state.count&#125;&#125;&lt;/div&gt; </span><br><span class="line">&lt;div&gt;A组件 state的数据：&#123;&#123;count&#125;&#125;&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<h3 id="简单导入方法-非重点"><a href="#简单导入方法-非重点" class="headerlink" title="简单导入方法(非重点)"></a>简单导入方法(非重点)</h3><blockquote>
<p>基于脚手架环境下 导入state管理数据</p>
</blockquote>
<ul>
<li><code>script</code> 脚本 <code>computed:</code>计算属性<ul>
<li>直接$store 也可以用  <code>computed:</code>计算属性 调用</li>
</ul>
</li>
<li><font color = #ff3040>适用于普通js文件</font></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 把state中数据，定义在组件内的计算属性中</span></span><br><span class="line"><span class="attr">computed</span>: &#123;</span><br><span class="line">  <span class="comment">// 1. 最完整的写法</span></span><br><span class="line">  <span class="comment">// count: function () &#123;</span></span><br><span class="line">  <span class="comment">//   return this.$store.state.count</span></span><br><span class="line">  <span class="comment">// &#125;,</span></span><br><span class="line">  <span class="comment">// 2. 缩写</span></span><br><span class="line">  count () &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="property">state</span>.<span class="property">count</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 不能使用剪头函数  this指向的不是vue实例</span></span><br></pre></td></tr></table></figure>

<h3 id="mapState-方法导入数据-重点"><a href="#mapState-方法导入数据-重点" class="headerlink" title="mapState 方法导入数据 重点"></a><code>mapState</code> 方法导入数据 <code>重点</code></h3><blockquote>
<p>目标: 简化导入store数据的代码</p>
<p>方案: 调用<code>mapState</code> 导入多个store数据</p>
<p>mapState作用：可以辅助获取到多个state的值(Vuex自带 但需要导入)</p>
</blockquote>
<ul>
<li><code>template</code>模板<ul>
<li><font color = #ff3040>导入Vuex的<code>state</code>时候数据已经保存到了<code>computed</code>当中 无需在data()里面再次储存 直接拿来调用即可 </font></li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;!-- 导入计算属性computed: 获取的 state数值 (实际上是对象) --&gt;</span><br><span class="line">    &lt;p&gt;&#123;&#123;demo&#125;&#125;&lt;/p&gt;</span><br><span class="line">    &lt;p&gt;&#123;&#123;abc&#125;&#125;&lt;/p&gt;</span><br><span class="line">  &lt;/div&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code>脚本<ul>
<li>把vuex中的state数据映射到组件的计算属性中。(导入<code>mapState</code>)</li>
<li><font color = #ff3040>导入Vuex的<code>state</code>时候数据已经保存到了<code>computed</code>当中 无需在data()里面再次储存 直接拿来调用即可 </font></li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; mapState &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>computed:</code>计算属性<ul>
<li>调用<code>mapState</code>设置方法 通过 <code>computed:</code>计算属性来声明</li>
<li>利用结构赋值<code>...</code> 不影响计算属性其他方法</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用mapState来生成计算属性  mapState函数返回值是对象</span></span><br><span class="line"><span class="comment">// 使用mapState使用对象传参</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="comment">// 在计算属性中 导入Vuex state中的值</span></span><br><span class="line">  <span class="attr">computed</span>: &#123;</span><br><span class="line">    <span class="comment">// 结构赋值... 相当于在computed计算属性中导入这两个数值</span></span><br><span class="line">    <span class="comment">// 结构赋值... 可以导入数值 也可导入对象</span></span><br><span class="line">     ...<span class="title function_">mapState</span>([<span class="string">&#x27;demo&#x27;</span>, <span class="string">&#x27;abc&#x27;</span>]) <span class="comment">// 调用state中储存的属性名(实际上是对象)</span></span><br><span class="line">   </span><br><span class="line">      <span class="comment">// 等同于这种写法</span></span><br><span class="line">      <span class="comment">// 冒号左边是state中储存的属性名</span></span><br><span class="line">      <span class="comment">// 冒号右边是 获取到state中储存数据的自定义名称</span></span><br><span class="line">      <span class="comment">// ...mapState(&#123;</span></span><br><span class="line">   <span class="comment">//   demo: &#x27;demo&#x27;</span></span><br><span class="line">  <span class="comment">//    abc: &#x27;abc&#x27;</span></span><br><span class="line"><span class="comment">//    &#125;)</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p>总结：</p>
<p>1、是否组件的所有数据都应该放到Store中？不一定（数据仅仅需要在本组件使用，那么没有必要放到Store），放到Store中的数据一般需要多个组件共享。</p>
<p>2、<code>mapState</code>的方法</p>
<ul>
<li>基本使用</li>
<li>简化用法</li>
<li>自定义和映射计算属性结合。。</li>
</ul>
<p>3、 利用结构赋值<code>...</code> 导入 <code>mapState</code></p>
<h2 id="同步数据获取和修改数据-mutations"><a href="#同步数据获取和修改数据-mutations" class="headerlink" title="同步数据获取和修改数据 mutations"></a>同步数据获取和修改数据 <code>mutations</code></h2><p><a target="_blank" rel="noopener" href="https://vuex.vuejs.org/zh/guide/mutations.html">同步数据修改 mutations</a></p>
<blockquote>
<p>目标：Vuex规定必须通过<code>mutation</code>修改数据，不可以直接通过store修改状态数据。</p>
<p>作用: Vuex规定 非异步数据 都需要在<code>mutations</code> 上进行修改 不可在组件内部修改(专门修改数据)</p>
</blockquote>
<ul>
<li><font color = #ff3040>注意: 此方法写在 Vue方法<code>methods:</code> Vue方法里面</font></li>
<li>先定义（mutations），再出发  this.$store.commit(‘mutation的名称，参数’)</li>
<li>&#96;&#96;mutation<code>的本质就是方法，方法名称自定义，</code>mutation&#96;函数内部负责处理的变更操作。</li>
<li>一种操作就是一个<code>mutation</code>，不同的<code>mutation</code>处理不同的场景。</li>
<li>默认页面打开时候 不会获取数据 需要添加在 <code>created()</code>声明周期中触发</li>
</ul>
<h3 id="定义-mutations状态修改函数"><a href="#定义-mutations状态修改函数" class="headerlink" title="定义 mutations状态修改函数"></a>定义 <code>mutations</code>状态修改函数</h3><ul>
<li><code>mutations</code>本质上是方法 方法名称自定义<code> mutations</code>函数内部负责处理的变更操作</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">  <span class="comment">// mutations进行数据的变更</span></span><br><span class="line"><span class="attr">mutations</span>: &#123;</span><br><span class="line">    <span class="comment">// 定义一个mutation，用于累加count值</span></span><br><span class="line">    <span class="comment">// increment这个名字是自定义的</span></span><br><span class="line">    increment (state, payload) &#123;</span><br><span class="line">      <span class="comment">// 参数一 表示state的数据(state里面的数据)</span></span><br><span class="line">      <span class="comment">// 参数二 payload表示需要修改的数据(触发mutation时传递过来)</span></span><br><span class="line">        state.<span class="property">count</span> = state.<span class="property">count</span> + payload</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="简单的导入方法-非重点"><a href="#简单的导入方法-非重点" class="headerlink" title="简单的导入方法(非重点)"></a>简单的导入方法(非重点)</h3><ul>
<li>常用于同步数据的获取(同步和修改都可以)$store.commit()</li>
<li><font color = #ff3040>适用于普通js文件</font></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">  increment () &#123;</span><br><span class="line">    <span class="comment">// 通过触发mutation修改state中的count的值</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">commit</span>(<span class="string">&#x27;increment&#x27;</span>, <span class="number">2</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<h3 id="mapMutations-方法导入数据-重点"><a href="#mapMutations-方法导入数据-重点" class="headerlink" title="mapMutations 方法导入数据 重点"></a><code>mapMutations</code> 方法导入数据 <code>重点</code></h3><blockquote>
<p>作用: 把vuex中的mutations的函数映射到组件的methods中</p>
<p>通俗：通过mapMutations函数可以生成methods中函数</p>
</blockquote>
<ul>
<li><code>script</code>脚本<ul>
<li>把vuex中的<code>mapMutations</code>数据映射到组件的计算属性中。(导入<code>mapMutations</code>)</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;  mapMutations &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>methods:</code> Vue方法中<ul>
<li>调用<code>mapMutations</code> 方法 通过<code>methods:</code> Vue方法来声明</li>
<li>当事件函数名称和mutation名称一致时候 可以简写为数组 <code> ...mapMutations([&#39;increment&#39;])</code></li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="comment">// 1、对象参数的写法</span></span><br><span class="line">    <span class="comment">// ...mapMutations(&#123;</span></span><br><span class="line">    <span class="comment">//   // 冒号右侧的increment是mutation的名称</span></span><br><span class="line">    <span class="comment">//   // 冒号左侧的increment是事件函数的名称，可以自定义</span></span><br><span class="line">    <span class="comment">//   increment: &#x27;increment&#x27;</span></span><br><span class="line">    <span class="comment">// &#125;)</span></span><br><span class="line">    <span class="comment">// 2、数组参数的写法（事件函数名称和mutation名称一致）</span></span><br><span class="line">    ...<span class="title function_">mapMutations</span>([<span class="string">&#x27;increment&#x27;</span>])</span><br><span class="line">    <span class="comment">// 3、这种写法和第2种等效</span></span><br><span class="line">    <span class="comment">// increment (param) &#123;</span></span><br><span class="line">    <span class="comment">//   // 点击触发该函数后要再次触发mutation的</span></span><br><span class="line">    <span class="comment">//   this.$store.commit(&#x27;increment&#x27;, param)</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>template</code>模板</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;button @click=&quot;increment(1)&quot;&gt;点击+1&lt;/button&gt;</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>mapMutations函数的作用：简化methods的定义</li>
<li>原始方式：通过$store.commit方法触发mutation</li>
<li>简写方式一：对象写法</li>
<li>简写方式二：数组写法</li>
</ol>
<h2 id="异步数据获取-action"><a href="#异步数据获取-action" class="headerlink" title="异步数据获取 action"></a>异步数据获取 <code>action</code></h2><p><a target="_blank" rel="noopener" href="https://vuex.vuejs.org/zh/guide/actions.html">处理异步获取action</a></p>
<blockquote>
<p>目标: Vuex的异步数据获取(不具备修改数据功能)</p>
<p>作用: <code>action</code> 获取数据后 需要导入 <code>mutations</code>中进行修改 (自身不具备修改条件)</p>
</blockquote>
<ul>
<li><font color = #ff3040>注意: 此方法写在 Vue方法<code>methods:</code> Vue方法里面</font></li>
<li>常用于获取服务器的数据 <code>async await</code></li>
<li>不具备修改数据功能 需要在 <code>mutations</code>中进行修改 然后再获取到</li>
<li>action的作用：处理异步任务，获取异步结果后，把数据交给mutation更新数据</li>
<li>触发action需要使用  this.$store.dispatch</li>
<li>action 支持获取 <code>promise</code>数据 并且支持导出</li>
</ul>
<h3 id="定义-action异步数据获取"><a href="#定义-action异步数据获取" class="headerlink" title="定义 action异步数据获取"></a>定义 <code>action</code>异步数据获取</h3><ul>
<li>actions是固定的，用于定义异步操作的动作（函数）</li>
<li>本身不具备修改功能 需要导入到<code>mutations</code>中进行修改 然后再获取到</li>
<li>参数一 constext 类似this.$store 用来实例化 actions<br>参数二 payload接收传来的数值</li>
<li><code>commit</code>是触发<code>mutations</code>的Vuex方法 把异步数据获取到后 进入<code>mutations</code>进行同步数据获取<ul>
<li>context.commit(‘mutations 获取数据方法名’, 储存的数据)</li>
<li>异步数据获取后 <code>async</code> 处理后 把数据变成同步数据 然后 进入<code>mutations</code>进行同步数据获取</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">  <span class="comment">// 4. state: 储存组件的所有数据</span></span><br><span class="line">  <span class="attr">state</span>: &#123;</span><br><span class="line">    <span class="attr">demo</span>: <span class="string">&#x27;你好&#x27;</span>,</span><br><span class="line">    <span class="attr">abc</span>: <span class="number">1</span>,</span><br><span class="line">    <span class="attr">list</span>: [] <span class="comment">// 储存异步获取到的数据</span></span><br><span class="line">  &#125;,</span><br><span class="line"><span class="comment">// actions是固定的，用于定义异步操作的动作（函数）</span></span><br><span class="line"><span class="attr">actions</span>: &#123;</span><br><span class="line">    <span class="comment">// 定义了一个action，用于查询接口数据 需要设置async取消异步 同步数据</span></span><br><span class="line">    <span class="keyword">async</span> queryData (context, payload) &#123;</span><br><span class="line">      <span class="comment">// 参数一 constext 类似this.$store 用来实例化 actions </span></span><br><span class="line">      <span class="comment">// 参数二 payload接收传来的数值</span></span><br><span class="line">      <span class="comment">// 1. 调用接口获取数据</span></span><br><span class="line">        <span class="keyword">const</span> ret = <span class="keyword">await</span> axios.<span class="title function_">get</span>(<span class="string">&#x27;http://test.zjie.wang/tab&#x27;</span>)</span><br><span class="line">      <span class="comment">// 2. 必须触发mutation修改list的值</span></span><br><span class="line">      <span class="comment">// context类似于this.$store 实例化 actions</span></span><br><span class="line">      <span class="comment">// commit 是触发 mutations 里面的函数 连接同步数据获取的mutations中 把数据进行修改</span></span><br><span class="line">      <span class="comment">// 把数据设置到 mutations的 updateList方法名中 进行修改数据</span></span><br><span class="line">        context.<span class="title function_">commit</span>(<span class="string">&#x27;updateList&#x27;</span>, ret.<span class="property">data</span>.<span class="property">list</span>) </span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 3. mutations进行数据的变更</span></span><br><span class="line"><span class="attr">mutations</span>: &#123;</span><br><span class="line">    updateList (state, payload) &#123;</span><br><span class="line">        <span class="comment">// payload参数二是 获取数据的参数</span></span><br><span class="line">      state.<span class="property">list</span> = payload <span class="comment">// 把数据 赋值给state储存 </span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="进入mutations进行同步数据获取简单的导入方法-非重点"><a href="#进入mutations进行同步数据获取简单的导入方法-非重点" class="headerlink" title="进入mutations进行同步数据获取简单的导入方法(非重点)"></a>进入<code>mutations</code>进行同步数据获取简单的导入方法(非重点)</h3><ul>
<li>常用于异步的数据获取 store.dispatch()</li>
<li><font color = #ff3040>适用于普通js文件</font></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">    handleQuery () &#123;</span><br><span class="line">        <span class="comment">// 触发action(必须调用dispatch方法)</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">dispatch</span>(<span class="string">&#x27;queryData&#x27;</span>, <span class="number">111</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="mapActions-方法获取数据-重点"><a href="#mapActions-方法获取数据-重点" class="headerlink" title="mapActions 方法获取数据 重点"></a><code>mapActions</code> 方法获取数据 <code>重点</code></h3><p>mapActions辅助函数，把actions中的函数映射组件methods中</p>
<p>通俗：通过mapActions函数可以生成methods中函数</p>
<ul>
<li><ol>
<li><code>mapActions</code> 方法获取 获取异步数据</li>
<li>获取到的数据 通过Vuex的<code>mutations</code> 处理 储存到Vuex的 <code>state</code> 数据</li>
<li>通过Vue文件的 <code>mapState</code> 方法导入 <code>state</code> 数据</li>
</ol>
</li>
</ul>
<ul>
<li><code>script</code> 脚本<ul>
<li>把vuex中的<code>mapActions</code>数据映射到组件的计算属性中。(导入<code>mapActions</code>)</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; mapActions &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>methods:</code> Vue方法中<ul>
<li>设置异步获取数据的方法 并且在 <code>state</code> 储存</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 相当于 methods申明了一个函数fn(num)&#123; this.$store.dispatch(&#x27;queryData&#x27;, num)&#125; </span></span><br><span class="line"><span class="comment">// ...mapActions(&#123;</span></span><br><span class="line"><span class="comment">//   fn: &#x27;queryData&#x27;</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"><span class="comment">// 相当于 methods申明了一个函数getData(num)&#123; this.$store.dispatch(&#x27;getData&#x27;, num)&#125; </span></span><br><span class="line">...<span class="title function_">mapActions</span>([<span class="string">&#x27;queryData&#x27;</span>])</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>computed:</code> 计算方法<ul>
<li>在 <code>mapState</code> 导入 Vue 的<code> state</code>数据</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">computed</span>: &#123;</span><br><span class="line">  ...<span class="title function_">mapState</span>([<span class="string">&#x27;list&#x27;</span>]), <span class="comment">// 导入state中储存的属性名(实际上是对象)</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本<code>created()</code> 声明周期<ul>
<li>页面刷新时候 让其获取服务器异步数据</li>
<li>需要先导入<code>mapActions</code> 方法 否则需要 this.$store.dispatch(‘mapActions方法名’)</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">created () &#123;</span><br><span class="line">   <span class="comment">// 触发加载热映数据的action</span></span><br><span class="line">   <span class="comment">// this.$store.dispatch(&#x27;queryData&#x27;)</span></span><br><span class="line">   <span class="variable language_">this</span>.<span class="title function_">queryData</span>()</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>template</code> 模板<ul>
<li>获取 Vuex里面的<code>state</code>中的数据 循环遍历渲染到页面上</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line">    &lt;!-- 获取 Vuex里面的state中list的数据 循环遍历渲染到页面上 --&gt;</span><br><span class="line">  &lt;li v-for=&quot;item in list&quot; :key=&quot;item.id&quot;&gt;&#123;&#123;item.title&#125;&#125;&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br><span class="line">&lt;button @click=&quot;queryData&quot;&gt;点击X&lt;/button&gt;</span><br></pre></td></tr></table></figure>

<h3 id="异步数据登录实战例子"><a href="#异步数据登录实战例子" class="headerlink" title="异步数据登录实战例子"></a>异步数据登录实战例子</h3><blockquote>
<p><code>目标</code> 实现基本的登录功能 </p>
<p><code>插件</code> <a target="_blank" rel="noopener" href="https://element.eleme.cn/#/zh-CN/component/form#form-biao-dan">饿了么ui表单</a>  <a target="_blank" rel="noopener" href="https://github.com/yiminghe/async-validator">表单验证validate</a> <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/js-cookie">第三方包js-cookie</a></p>
</blockquote>
<ul>
<li>封装登录页的api接口 <code>api文件夹里面 urse.js</code><ul>
<li>已经设置了 axios封装通用的接口模块 所以直接填入即可</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 登录请求</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">login</span> (data) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="comment">// 请求登录的方式</span></span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;/sys/login&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: data</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>在Vuex组件的<code>actions:</code>获取登录异步数据 <code>modules文件夹的 user.js</code><ul>
<li>登录案例无需储存数据 只需要设置 async函数同步获取数据</li>
<li>判断如果登录成功 返回一个状态位(成功true 不成功false)</li>
<li><code>context.commit</code> 把数据储存到state里面</li>
<li>在<code>mutations</code> 数据获取中 把token储存到cookie里面(没有cookie token代替)<ul>
<li>cookie是 第三方包js-cookie</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入登录的api接口</span></span><br><span class="line"><span class="keyword">import</span> &#123; login &#125; <span class="keyword">from</span> <span class="string">&#x27;../../api/user&#x27;</span></span><br><span class="line"><span class="comment">// 导入存储和获取的cookie的组件(第三方包js-cookie)</span></span><br><span class="line"><span class="keyword">import</span> &#123; setToken, getToken &#125; <span class="keyword">from</span> <span class="string">&#x27;../../utils/auth&#x27;</span></span><br><span class="line"><span class="comment">// 用户模块</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">namespaced</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">state</span>: &#123;</span><br><span class="line">    <span class="comment">// 从浏览器缓存中 读取cookie值 如果没有 赋值为null 防止报错</span></span><br><span class="line">    <span class="attr">token</span>: <span class="title function_">getToken</span>() || <span class="literal">null</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">mutations</span>: &#123;</span><br><span class="line">    updateToken (state, payload) &#123;</span><br><span class="line">      <span class="comment">// 接收异步获取的数据</span></span><br><span class="line">      state.<span class="property">token</span> = payload</span><br><span class="line">      <span class="comment">// 把获取到的token值(目前没cookie) 存储到cookie缓存中去</span></span><br><span class="line">      <span class="title function_">setToken</span>(payload)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 异步获取数据</span></span><br><span class="line">  <span class="attr">actions</span>: &#123;</span><br><span class="line">    <span class="comment">// 实现异步登录 获取服务器的返回值 并且储存token</span></span><br><span class="line">    <span class="keyword">async</span> login (context, payload) &#123;</span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> ret = <span class="keyword">await</span> <span class="title function_">login</span>(payload)</span><br><span class="line">        <span class="keyword">if</span> (ret.<span class="property">data</span>.<span class="property">code</span> === <span class="number">10000</span>) &#123;</span><br><span class="line">          <span class="comment">// 登录成功，缓存服务器返回的token(储存到 Vuex的state里面)</span></span><br><span class="line">          context.<span class="title function_">commit</span>(<span class="string">&#x27;updateToken&#x27;</span>, ret.<span class="property">data</span>.<span class="property">data</span>)</span><br><span class="line">          <span class="comment">// 如果登录成功 返回一个成功状态位</span></span><br><span class="line">          <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          <span class="comment">// 登录失败 返回一个失败状态位</span></span><br><span class="line">          <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">        <span class="comment">// 登录失败(这个是网络错误) 返回一个失败状态位</span></span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>登录vue文件 导入Vuex异步获取的登录信息 <code>login文件夹 index.js</code><ul>
<li>使用了第三方表单验证 <a target="_blank" rel="noopener" href="https://github.com/yiminghe/async-validator">validate</a></li>
<li>mapActions 映射 actions 异步数据获取</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入表单验证js文件</span></span><br><span class="line"><span class="keyword">import</span> &#123; validUsername &#125; <span class="keyword">from</span> <span class="string">&#x27;@/utils/validate&#x27;</span></span><br><span class="line"><span class="comment">// 导入Vuex的Actions 映射</span></span><br><span class="line"><span class="keyword">import</span> &#123; mapActions &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="comment">// 导入(映射)Vuex的 actions异步数据获取方法(Vuex入口文件user里面的login异步获取登录数据方法)</span></span><br><span class="line">    ...<span class="title function_">mapActions</span>(<span class="string">&#x27;user&#x27;</span>, [<span class="string">&#x27;login&#x27;</span>]),</span><br><span class="line">   handleLogin () &#123;</span><br><span class="line">      <span class="comment">// 点击登录按钮的时候 触发表单验证</span></span><br><span class="line">      <span class="comment">// validate表单效验插件() $refs操作sel-form组件实例实现验证 通过this.$refs.名称 访问组件实例</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">loginForm</span>.<span class="title function_">validate</span>(<span class="keyword">async</span> valid =&gt; &#123;</span><br><span class="line">        <span class="comment">// 防止用户不输入内容 点击登录 先服务器提交数据</span></span><br><span class="line">        <span class="comment">// 如果通过效验(true) 就向服务器提交数据</span></span><br><span class="line">        <span class="keyword">if</span> (valid) &#123;</span><br><span class="line">          <span class="comment">// 如果完成了输入效验 把账号密码 上传到服务器 判读是否正确</span></span><br><span class="line">          <span class="keyword">const</span> ret = <span class="keyword">await</span> <span class="variable language_">this</span>.<span class="title function_">login</span>(&#123; <span class="comment">// 调用Vuex的异步获取登录数据声明的actions方法(映射Vuex方法)</span></span><br><span class="line">           <span class="attr">mobile</span>: <span class="variable language_">this</span>.<span class="property">loginForm</span>.<span class="property">username</span>, <span class="comment">// 获取用户输入的账号密码 左侧是后端规定的属性名 上传到服务器比对</span></span><br><span class="line">           <span class="attr">password</span>: <span class="variable language_">this</span>.<span class="property">loginForm</span>.<span class="property">password</span></span><br><span class="line">          &#125;)</span><br><span class="line">          <span class="comment">// 判断Vuex返回的状态位(自设置的 如果登录成功 返回的true 不成功返回false)</span></span><br><span class="line">          <span class="keyword">if</span> (ret) &#123;</span><br><span class="line">            <span class="comment">// 如果返回true 说明登录成功 跳转到主页面</span></span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(<span class="string">&#x27;/dashboard&#x27;</span>)</span><br><span class="line">          &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="comment">// 否则就是false 说明登录失败 提示用户 (饿了么ui提供的弹窗)</span></span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">$message</span>.<span class="title function_">error</span>(<span class="string">&#x27;账号密码输入错误&#x27;</span>)</span><br><span class="line">          &#125;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          <span class="comment">// 如果表单不通过 提示用户 不提交服务器 (饿了么ui提供的弹窗)</span></span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">$message</span>.<span class="title function_">error</span>(<span class="string">&#x27;请输入正确的用户名密码&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>原始方式：this.$store.dispatch(‘queryData’, num)</li>
<li>简化方式一：对象</li>
<li>简化方式二：数组</li>
</ol>
<h3 id="获取action的返回值-return"><a href="#获取action的返回值-return" class="headerlink" title="获取action的返回值(return)"></a>获取<code>action</code>的返回值(return)</h3><ul>
<li>Vuex中支持获取<code>action</code>的返回值 因为<code>action</code>返回的是promise对象 只需要<code>then</code>即可获取返回值(return)</li>
</ul>
<blockquote>
<p>获取返回值例子</p>
</blockquote>
<ol>
<li>Vuex中 设置<code>action</code>的返回值</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">actions</span>: &#123;</span><br><span class="line">  <span class="comment">// 设置一个return的返回值</span></span><br><span class="line">  updateInfo (context, payload) &#123;</span><br><span class="line"><span class="keyword">return</span> <span class="string">&#x27;你好&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>在Vue组件中 获取<code>action</code>的返回值<ul>
<li>在Vue组件中调用action 并且通过then 获取其return的返回值</li>
</ul>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在Vue组件中调用action 并且通过then 获取其return的返回值</span></span><br><span class="line">store.<span class="title function_">dispatch</span>().<span class="title function_">then</span>(<span class="function"><span class="params">ret</span>=&gt;</span>&#123;</span><br><span class="line">	<span class="comment">// ret 就是其返回的值</span></span><br><span class="line">	  <span class="variable language_">console</span>.<span class="title function_">log</span>(ret) <span class="comment">// 你好</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<h2 id="处理state里的数据-getters"><a href="#处理state里的数据-getters" class="headerlink" title="处理state里的数据 getters"></a>处理state里的数据 <code>getters</code></h2><p><a target="_blank" rel="noopener" href="https://vuex.vuejs.org/zh/guide/getters.html">getters处理数据</a></p>
<blockquote>
<p>目标：熟悉getters的应用场景和具体使用步骤</p>
<p>作用: 相当于state的计算属性（基于State处理成另外一份数据）</p>
<p>应用场景：模板中需要的数据和State中的数据不完全一样 需要基于state中的数据进行加工处理，形成一份新的的数据，给模板使用</p>
</blockquote>
<ul>
<li><font color = #ff3040>注意: 此方法写在 Vue方法<code>computed:</code> 来获取<code>getters</code>修改后的值</font></li>
<li>只能修改 Vuex里面的<code>state</code>数据</li>
<li>如果Vue文件不调用此方法 数据在Vuex中不会做出改变(即便是设置了)<ul>
<li>即便调用了这个方法 <code>state</code> 里面原数据也不会被修改 <code>getters</code>方法调用时 只是在原数据上进行修改</li>
</ul>
</li>
<li><code>getters</code>可以通过<code>mapGetters</code>映射到不同的组件中(这些组件共享这个<code>getters</code>) 这样有一个这些组件不需要再单独定义个子的计算属性 代码沉余度较低</li>
<li><font color =#ff3040>需要 return</font></li>
</ul>
<h3 id="定义-getters-修改state里数据"><a href="#定义-getters-修改state里数据" class="headerlink" title="定义 getters 修改state里数据"></a>定义 <code>getters</code> 修改state里数据</h3><ul>
<li>修改 <code>state</code>里数据 定义<code>getters</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// state: 储存组件的所有数据</span></span><br><span class="line"><span class="attr">state</span>: &#123;</span><br><span class="line">     <span class="comment">// 需要修改的state数据</span></span><br><span class="line">    <span class="attr">list</span>: [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>] </span><br><span class="line">  &#125;,</span><br><span class="line"><span class="comment">// 相当于state的计算属性（基于State处理成另外一份数据）</span></span><br><span class="line"><span class="comment">// 进行state数据处理</span></span><br><span class="line"><span class="attr">getters</span>: &#123;</span><br><span class="line">    getPartList (state) &#123;</span><br><span class="line">      <span class="keyword">return</span> state.<span class="property">list</span>.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> item.<span class="property">id</span> &gt; <span class="number">1</span></span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h3 id="获取其他getters的值"><a href="#获取其他getters的值" class="headerlink" title="获取其他getters的值"></a>获取其他<code>getters</code>的值</h3><ul>
<li><code>getters</code>有两个参数 <ul>
<li>参数1 获取<code>state</code>里面的数据 进行修改</li>
<li>参数2 获取<code>getters</code> 里面的其他数据</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">state</span>: &#123;</span><br><span class="line">    <span class="attr">list</span>: [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>] </span><br><span class="line">  &#125;,</span><br><span class="line"><span class="attr">getters</span>: &#123;</span><br><span class="line">    getPartList (state) &#123;</span><br><span class="line">      <span class="keyword">return</span> state.<span class="property">list</span>.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> item.<span class="property">id</span> &gt; <span class="number">1</span></span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">      getGetters (state,getters) &#123;</span><br><span class="line">          <span class="comment">// 获取getters里面的其他数据</span></span><br><span class="line">		<span class="keyword">return</span> getters.<span class="property">getPartList</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h3 id="简单使用方法-非重点"><a href="#简单使用方法-非重点" class="headerlink" title="简单使用方法(非重点)"></a>简单使用方法(非重点)</h3><ul>
<li><font color = #ff3040>适用于普通js文件</font></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">caleList () &#123;</span><br><span class="line">  <span class="comment">// 注意：获取getters的值，不需要加括号（当属性使用）</span></span><br><span class="line">  <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="property">getters</span>.<span class="property">getPartList</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<h3 id="mapGetters-方法处state数据"><a href="#mapGetters-方法处state数据" class="headerlink" title="mapGetters 方法处state数据"></a><code>mapGetters</code> 方法处state数据</h3><blockquote>
<ul>
<li>如果Vue文件不调用此方法 数据在Vuex中不会做出改变(即便是设置了)</li>
<li>导入<code>mapGetters</code> 方法后 循环遍历数据 需要设置为<code>mapGetters</code> 方法的数据<ul>
<li>即便调用了这个方法 <code>state</code> 里面原数据也不会被修改 <code>getters</code>方法调用时 只是在原数据上进行修改</li>
</ul>
</li>
</ul>
</blockquote>
<ul>
<li><code>script</code> 脚本<ul>
<li>把vuex中的<code>mapGetters</code> 数据映射到组件的计算属性中。(导入<code>mapGetters</code> )</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; mapGetters &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>computed:</code>计算属性<ul>
<li>处理Vuex里面的 <code>state</code>数据</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; mapGetters &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="comment">// mapGetters的作用：把getters映射为计算属性</span></span><br><span class="line"><span class="attr">computed</span>: &#123;</span><br><span class="line">    ...<span class="title function_">mapGetters</span>([<span class="string">&#x27;getPartList&#x27;</span>]),</span><br><span class="line">    <span class="comment">// ...mapGetters(&#123;</span></span><br><span class="line">    <span class="comment">//   calcList: &#x27;getPartList&#x27;</span></span><br><span class="line">    <span class="comment">// &#125;),</span></span><br><span class="line">    <span class="comment">// calcList () &#123;</span></span><br><span class="line">    <span class="comment">//   // 注意：获取getters的值，不需要加括号（当属性使用）</span></span><br><span class="line">    <span class="comment">//   return this.$store.getters.getPartList</span></span><br><span class="line">    <span class="comment">// &#125;,</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>template</code>模板<ul>
<li>把修改的<code>state</code>数据 渲染到页面上</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line">  &lt;li v-for=&quot;item in getPartList&quot; :key=&quot;item.id&quot;&gt;&#123;&#123;item.title&#125;&#125;&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br><span class="line">&lt;button @click=&quot;queryData&quot;&gt;点击X&lt;/button&gt;</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>getters相当于在State和组件之间添加一个环节（对state中的数据进行加工处理后再提供给组件）</li>
<li>getters不要修改state中的数据</li>
<li>getters类似之前的计算属性（基于state中的数据进行计算）</li>
</ol>
<h2 id="模块化拆分-modules"><a href="#模块化拆分-modules" class="headerlink" title="模块化拆分 modules"></a>模块化拆分 <code>modules</code></h2><p><a target="_blank" rel="noopener" href="https://vuex.vuejs.org/zh/guide/modules.html">modules模块拆分</a></p>
<blockquote>
<p>目标：Store中代码越来越多，不方便后续的维护和扩展 就需要用到 <code>modules</code>模块拆分</p>
<p>作用:  方便后期的维护和扩展</p>
</blockquote>
<h3 id="设置Vuex-modules入口文件"><a href="#设置Vuex-modules入口文件" class="headerlink" title="设置Vuex modules入口文件"></a>设置Vuex <code>modules</code>入口文件</h3><blockquote>
<p>在入口文件中可以导入所有的模块并进行统一配置</p>
</blockquote>
<ul>
<li>入口文件 设置 <code> modules:</code> 模块接收拆分的 Vuex组件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入Vuex的组件</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vuex</span> <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="comment">// 导入Vuex的拆分组件</span></span><br><span class="line"><span class="keyword">import</span> listModule <span class="keyword">from</span> <span class="string">&#x27;@/store/list.js&#x27;</span></span><br><span class="line"><span class="keyword">import</span> detail <span class="keyword">from</span> <span class="string">&#x27;@/store/detail.js&#x27;</span></span><br><span class="line"><span class="comment">// 实例化Vuex</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Vuex</span>)</span><br><span class="line"><span class="comment">// 导出store实例化对象(Vuex) 调用时 $store</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> <span class="title class_">Vuex</span>.<span class="title class_">Store</span>(&#123;</span><br><span class="line"><span class="comment">// 导入Vuex模块化组件(接收拆分的Vuex组件)</span></span><br><span class="line">  <span class="attr">modules</span>: &#123;</span><br><span class="line"> <span class="comment">// 左边是自定义名称 用于导入到Vue文件 Vue文件导入的名称</span></span><br><span class="line"> <span class="comment">// 右边是导入拆分组件的名称 需要和import导入名称匹配</span></span><br><span class="line">    <span class="attr">list</span>: listModule,</span><br><span class="line">    detail,</span><br><span class="line">    demo1,</span><br><span class="line">    demo</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="设置-Vuex拆分模块内部-js文件"><a href="#设置-Vuex拆分模块内部-js文件" class="headerlink" title="设置 Vuex拆分模块内部(js文件)"></a>设置 Vuex拆分模块内部<code>(js文件)</code></h3><blockquote>
<p>不同的功能可以拆分为不同的js模块</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入axios(可选)</span></span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&#x27;axios&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="comment">// 设置为局部组件 必须要设置为局部组件 否则Vuex无法识别</span></span><br><span class="line">  <span class="attr">namespaced</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="comment">// 储存数据 state</span></span><br><span class="line">  <span class="comment">// 如果箭头函数的返回值是对象，那么需要包裹一个小括号，否则会有歧义</span></span><br><span class="line">  <span class="attr">state</span>: <span class="function">() =&gt;</span> (&#123;</span><br><span class="line"></span><br><span class="line">  &#125;),</span><br><span class="line">  <span class="comment">// 同步数据修改 mutations</span></span><br><span class="line">  <span class="attr">mutations</span>: &#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 异步数据获取 action</span></span><br><span class="line">  <span class="attr">actions</span>: &#123;</span><br><span class="line"></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 处理state里的数据 getters</span></span><br><span class="line">  <span class="attr">getters</span>: &#123; &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="模块成员的访问规则-namespaced-true"><a href="#模块成员的访问规则-namespaced-true" class="headerlink" title="模块成员的访问规则 namespaced: true"></a>模块成员的访问规则 <code>namespaced: true</code></h3><ul>
<li>全局模块 (不包含namespaced属性）:不同模块的相同成员名称会冲突 <font color=#ff3040>不推荐</font></li>
<li>局部模块（包含namespaced属性）:不同模块的相同成员名称不会冲突，但是访问时需要添加前缀（模块名称）推荐<font color=#ff3040>推荐</font></li>
</ul>
<blockquote>
<p>全局和局部模块的访问规则的区别 </p>
</blockquote>
<ol>
<li><p>全局模式下（不加namespaced） <font color=#ff3040>建议使用局部模式</font></p>
<ul>
<li>不支持数组方法 并且不支持简化 不推荐</li>
<li>如果多个组件名称一致 会发生错误  <font color=#ff3040>不推荐使用!</font></li>
</ul>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在不添加命名空间的前提下（模块中不添加namespaced），安装如下的方式获取模块的状态数据</span></span><br><span class="line">...<span class="title function_">mapState</span>(&#123;</span><br><span class="line">  <span class="attr">msg</span>: <span class="function"><span class="params">state</span> =&gt;</span> state.<span class="property">detail</span>.<span class="property">msg</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ol start="2">
<li><p>局部模块下（添加namespaced）</p>
<ul>
<li>支持数组 并且常用 但是需要在 Vuex拆分模块添加 <code> namespaced: true</code></li>
</ul>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 如果模块添加的namespaced，那么可以按照如下方式简化</span></span><br><span class="line"><span class="comment">// 如下的参数一表示模块名称，参数二表示state中属性名称</span></span><br><span class="line">...<span class="title function_">mapState</span>(<span class="string">&#x27;detail&#x27;</span>, [<span class="string">&#x27;msg&#x27;</span>])</span><br></pre></td></tr></table></figure>

<h3 id="在Vue文件-访问模块成员的方法"><a href="#在Vue文件-访问模块成员的方法" class="headerlink" title="在Vue文件 访问模块成员的方法"></a>在Vue文件 访问模块成员的方法</h3><blockquote>
<p>如果设置了 局部模块 <code> namespaced: true</code> 就可以调用 数组写法 和 辅助函数</p>
</blockquote>
<ul>
<li>数组方法支持多个Vuex模块导入 辅助函数不支持</li>
</ul>
<h4 id="数组简化写法-39-39-39-39"><a href="#数组简化写法-39-39-39-39" class="headerlink" title="数组简化写法   (&#39;&#39;, [&#39;&#39;])"></a>数组简化写法 <code>  (&#39;&#39;, [&#39;&#39;])</code></h4><blockquote>
<p>数组简化方法 不需要导入其他东西 并且支持多个Vuex模块导入</p>
</blockquote>
<ul>
<li><code>script</code> 脚本 <ul>
<li>数组简写 :<code>...mapActions(&#39;modules左侧设置的Vuex名称&#39;, [&#39;Vuex模块中需要获取的数据&#39;])</code></li>
<li><font color = #ff3040>导入Vuex的<code>state</code>时候数据已经保存到了<code>computed</code>当中 无需在data()里面再次储存 直接拿来调用即可 </font></li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">//! 导入Vuex的mapState 获取 Vuex的state数据</span><br><span class="line">//! 导入mapActions 让Vuex获取服务器异步数据</span><br><span class="line">import &#123; mapState, mapActions &#125; from &#x27;vuex&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  // 在计算属性中 导入state数据</span><br><span class="line">  computed: &#123;</span><br><span class="line">    // 获取Vuex模块化的state指定数据 和 处理state数据getters</span><br><span class="line">    ...mapState(&#x27;detail&#x27;, [&#x27;movieInfo&#x27;])</span><br><span class="line">  &#125;,</span><br><span class="line">   // 在函数方法中 设置 action异步 和 mutations同步 数据获取</span><br><span class="line">  methods: &#123;</span><br><span class="line">    // 让Vuex模块化获取异步数据 并储存在Vue的state数据里面</span><br><span class="line">    ...mapActions(&#x27;detail&#x27;, [&#x27;movieDetail&#x27;])</span><br><span class="line">  &#125;,</span><br><span class="line">  created () &#123;</span><br><span class="line">    //  声明周期 页面加载时候 调用异步获取Vuex方法 获取服务器数据(携带动态路由传来的id)</span><br><span class="line">    this.movieDetail(this.$route.query.id) // 携带 动态路由传来的电影详情id 获取电影详情的内容</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li><code>template</code>模板调用<ul>
<li><font color = #ff3040>导入Vuex的<code>state</code>时候数据已经保存到了<code>computed</code>当中 无需在data()里面再次储存 直接拿来调用即可 </font></li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123;movieDetail&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123;movieInfo&#125;&#125;&lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<h4 id="通过辅助函数进行简化-createNamespacedHelpers"><a href="#通过辅助函数进行简化-createNamespacedHelpers" class="headerlink" title="通过辅助函数进行简化 createNamespacedHelpers"></a>通过辅助函数进行简化 <code>createNamespacedHelpers</code></h4><blockquote>
<p>需要在Vue文件里 导入createNamespacedHelpers 并且不支持多个Vuex模块导入</p>
</blockquote>
<ul>
<li><code>script</code> 脚本 <ul>
<li>并不支持 多个Vuex模块导入</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line"><span class="comment">// 创建基于某个命名空间辅助函数 用来导入 Vuex组件化的数据</span></span><br><span class="line"><span class="keyword">import</span> &#123; createNamespacedHelpers &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="comment">// ~ 导入Vuex的mapState 获取 Vuex的state数据</span></span><br><span class="line"><span class="comment">// ~ 导入mapActions 让Vuex获取服务器异步数据</span></span><br><span class="line"><span class="comment">// 导入Vuex 的组件化数据</span></span><br><span class="line"><span class="comment">// const &#123; 用到的Vuex单一状态数(就是那四个值) &#125; = createNamespacedHelpers(&#x27;拆分的组件名&#x27;)</span></span><br><span class="line"><span class="keyword">const</span> &#123; mapState, mapActions &#125; = <span class="title function_">createNamespacedHelpers</span>(<span class="string">&#x27;list&#x27;</span>)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;HotMovie&#x27;</span>,</span><br><span class="line">  <span class="attr">computed</span>: &#123;</span><br><span class="line">    <span class="comment">// ~ 导入Vuex的mapState 获取Vuex的state数据</span></span><br><span class="line">    ...<span class="title function_">mapState</span>([<span class="string">&#x27;mlist&#x27;</span>])</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="comment">// ~ 获取服务器异步数据的 导入Vuex的异步获取 mapActions方法</span></span><br><span class="line">    ...<span class="title function_">mapActions</span>([<span class="string">&#x27;movelist&#x27;</span>]),</span><br><span class="line">  &#125;,</span><br><span class="line">  created () &#123;</span><br><span class="line">    <span class="comment">// ~ 声明周期 页面加载时候 调用异步获取Vuex方法 获取服务器数据</span></span><br><span class="line">    <span class="comment">// this.$store.dispatch(&#x27;movelist&#x27;)</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">movelist</span>()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h3 id="同时导入多和Vuex的拆分模块-39-39-39-39"><a href="#同时导入多和Vuex的拆分模块-39-39-39-39" class="headerlink" title="同时导入多和Vuex的拆分模块   (&#39;&#39;, [&#39;&#39;])"></a>同时导入多和Vuex的拆分模块 <code>  (&#39;&#39;, [&#39;&#39;])</code></h3><blockquote>
<p>利用数组简化写法 导入多个Vuex拆分模块</p>
</blockquote>
<ul>
<li><code>state</code> 不支持 数组对象方法 只能多次导入</li>
</ul>
<ol>
<li>映射多次实现多模块导入</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">  <span class="attr">computed</span>: &#123;</span><br><span class="line">      <span class="comment">// 多次导入 state储存数据</span></span><br><span class="line">    ...<span class="title function_">mapState</span>(<span class="string">&#x27;demo&#x27;</span>, [<span class="string">&#x27;listx&#x27;</span>]),</span><br><span class="line">    ...<span class="title function_">mapState</span>(<span class="string">&#x27;demo1&#x27;</span>, [<span class="string">&#x27;list&#x27;</span>])</span><br><span class="line">  &#125;,</span><br><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="comment">// 多次导入  methods同步数据 action异步数据同理</span></span><br><span class="line">    ...<span class="title function_">mapActions</span>(<span class="string">&#x27;list&#x27;</span>, &#123;</span><br><span class="line">        <span class="attr">getInfo1</span>: <span class="string">&#x27;getInfo&#x27;</span></span><br><span class="line">    &#125;),</span><br><span class="line">        ...<span class="title function_">mapActions</span>(<span class="string">&#x27;detail&#x27;</span>, &#123;</span><br><span class="line">        <span class="attr">getInfo2</span>: <span class="string">&#x27;getInfo&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">&#125;,</span><br><span class="line">	<span class="comment">// 声明周期调用methods同步数据</span></span><br><span class="line">  created () &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">getInfo1</span>()</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">getInfo2</span>()</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>通过数组方式映射一次<ul>
<li>&#x2F;可以在数组中写 并且&#x2F;不会让重名的值覆盖 因为会被看成一个整体</li>
<li>[] 和 . 都是方法写法 <ul>
<li>this.fn()  &#x3D;&#x3D;&#x3D; this[‘fn’] ()</li>
</ul>
</li>
<li><code>state</code> 不支持 数组对象方法 只能多次导入</li>
</ul>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">    <span class="comment">// 多次导入  methods同步数据 action异步数据同理</span></span><br><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">    ...<span class="title function_">mapActions</span>([</span><br><span class="line">      <span class="string">&#x27;list/getInfo&#x27;</span>, <span class="comment">// 添加/ 不会被相同的getInfo覆盖 和前面的看做一个整体</span></span><br><span class="line">      <span class="string">&#x27;detail/getInfo&#x27;</span></span><br><span class="line">    ])</span><br><span class="line">&#125;,</span><br><span class="line">    <span class="comment">// 声明周期调用methods同步数据</span></span><br><span class="line">    created () &#123;</span><br><span class="line">    <span class="variable language_">this</span>[<span class="string">&#x27;list/getInfo&#x27;</span>]() </span><br><span class="line">    <span class="variable language_">this</span>[<span class="string">&#x27;detail/getInfo&#x27;</span>]()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="模块化拆分actions获取所有拆分组件的state数据"><a href="#模块化拆分actions获取所有拆分组件的state数据" class="headerlink" title="模块化拆分actions获取所有拆分组件的state数据"></a>模块化拆分<code>actions</code>获取所有拆分组件的<code>state</code>数据</h2><ul>
<li><code>actions</code>异步获取数据 支持获取其他拆分组件的<code>state</code>数据</li>
</ul>
<blockquote>
<p>获取案例</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210803212126561.png" alt="image-20210803212126561"></p>
<ul>
<li>需要获取拆分组件 user.js里面的<code>state</code>里的profile对象中的token值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">insertCart (context) &#123;</span><br><span class="line">  <span class="comment">// context.rootState可以获取所有的模块的状态</span></span><br><span class="line">  <span class="comment">// 获取user.js里面的state里的profile对象中的token值</span></span><br><span class="line">  <span class="keyword">const</span> token = context.<span class="property">rootState</span>.<span class="property">user</span>.<span class="property">profile</span>.<span class="property">token</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="全局Vuex组件"><a href="#全局Vuex组件" class="headerlink" title="全局Vuex组件"></a>全局Vuex组件</h2><ul>
<li>不加 <code>namespaced: true</code> 就是全局的Vuex组件</li>
<li>一般全局Vuex组件 单独设置在一个js文件中</li>
<li>设置全局数据使用的是 <code>getters</code>方法 处理state里面数据<ul>
<li><code>...mapGetters([])</code> 导入全局数据 设置在<code>computed</code>计算属性当中</li>
</ul>
</li>
</ul>
<h3 id="mutation-同步数据获取-Vuex全局"><a href="#mutation-同步数据获取-Vuex全局" class="headerlink" title="mutation 同步数据获取 Vuex全局"></a><code>mutation</code> 同步数据获取 Vuex全局</h3><p><img src="https://i.loli.net/2021/06/24/gJzPDIsFGXh9mpn.png" alt="image-20210624211830356"></p>
<br>

<blockquote>
<p>设置 全局Vuex 组件 (全局数据导出)</p>
</blockquote>
<ul>
<li>需要设置全局state的数据 <code>user.js</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">state</span>: &#123;</span><br><span class="line">  <span class="comment">//! 储存用户信息</span></span><br><span class="line">  <span class="attr">userInfo</span>: &#123;<span class="attr">username</span>:<span class="number">123</span>&#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<ul>
<li>配置控制全局Vuex的文件 <code>global.js</code><ul>
<li>这个文件只是控制全局Vuex文件 并非已经设置了全局Vuex组件</li>
<li><font color = #ff3040>全局Vuex <code>state</code> 数据是通过Vuex <code>getters</code>导出</font></li>
<li><code>getters</code> 在Vue组件中 需要用<code> computed:</code> 计算属性导入</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 这里设置全局的 Vuex模块</span></span><br><span class="line"><span class="comment">// import getters from &#x27;@/store/getters.js&#x27;</span></span><br><span class="line"><span class="comment">// 配置全局属性 getters</span></span><br><span class="line"><span class="keyword">const</span> getters = &#123;</span><br><span class="line">  <span class="comment">// 左侧是调用全局Vuex的名称(自定义) 右侧是从指定文件中 导入数据 让其变为全局Vuex</span></span><br><span class="line">  <span class="comment">// 导入全局的用户信息</span></span><br><span class="line">  <span class="comment">// state类型 user文件 state里面userInfo属性名中的 username 里面的数据</span></span><br><span class="line">  <span class="attr">uname</span>: <span class="function"><span class="params">state</span> =&gt;</span> state.<span class="property">user</span>.<span class="property">userInfo</span>.<span class="property">username</span> </span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 定义一个打印消息的全局Vuex模块</span></span><br><span class="line"><span class="keyword">const</span> mutations = &#123;</span><br><span class="line">  showInfo (context, payload) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;--------------&#x27;</span> + payload)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="comment">// 不加 namespaced: true 就是全局的Vuex组件</span></span><br><span class="line">  <span class="attr">getters</span>: getters,</span><br><span class="line">  <span class="attr">state</span>: &#123;&#125;,</span><br><span class="line">  <span class="attr">mutations</span>: mutations,</span><br><span class="line">  <span class="attr">actions</span>: &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>把控制全局Vuex组件 设置为全局Vuex组件 <code>index.js</code><ul>
<li>把控制全局的Vuex组件 设置为全局Vuex组件</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vuex</span> <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="comment">// 导入全局模块</span></span><br><span class="line"><span class="keyword">import</span> <span class="variable language_">global</span> <span class="keyword">from</span> <span class="string">&#x27;./modules/global&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Vuex</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> <span class="title class_">Vuex</span>.<span class="title class_">Store</span>(&#123;</span><br><span class="line">  <span class="attr">modules</span>: &#123;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// vuex中除了局部模块之外，也可以有全局模块(导出全局Vuex组件)</span></span><br><span class="line">  ...<span class="variable language_">global</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> store</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<blockquote>
<p>导入Vuex 声明的全局数据</p>
</blockquote>
<ul>
<li><code>script</code> 脚本<ul>
<li>导入的全局Vuex组件数据 uname数据</li>
<li><font color = #ff3040>全局Vuex <code>state</code> 数据是通过Vuex <code>getters</code>导出</font></li>
<li><code>getters</code> 在Vue组件中 需要用<code> computed:</code> 计算属性导入</li>
<li>直接导入设置全局Vuex名称即可</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入getters映射</span></span><br><span class="line"><span class="keyword">import</span> &#123; mapGetters &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">computed</span>: &#123;</span><br><span class="line">    <span class="comment">// 导入全局的Vuex组件</span></span><br><span class="line">    ...<span class="title function_">mapGetters</span>([</span><br><span class="line">    <span class="comment">// ~ 导入全局的Vuex用户信息</span></span><br><span class="line">      <span class="string">&#x27;uname&#x27;</span></span><br><span class="line">    ])</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>template</code> 模板<ul>
<li>把获取的全局Vuex组件数据 渲染到页面上(插值表达式)</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 导入Vuex获取的全局数据 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;name&quot;</span>&gt;</span>&#123;&#123; uname &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>扩展 导入全局<code>mutation</code></p>
</blockquote>
<ul>
<li>Vuex组件接收全局<code>mutation</code> <ul>
<li>需要在后面设置 <code>&#123; root:true &#125;</code> 才能获取到全局Vuex组件</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 接收全局mutation</span></span><br><span class="line">context.<span class="title function_">commit</span>(<span class="string">&#x27;showInfo&#x27;</span>, ret.<span class="property">data</span>.<span class="property">data</span>, &#123; <span class="attr">root</span>: <span class="literal">true</span> &#125;)</span><br></pre></td></tr></table></figure>

<h2 id="Vuex常用api-适用js文件调用"><a href="#Vuex常用api-适用js文件调用" class="headerlink" title="Vuex常用api 适用js文件调用"></a>Vuex常用api <code>适用js文件调用</code></h2><ul>
<li>如果是Vue3 无需设置this</li>
</ul>
<ol>
<li>State: 提供一个响应式数据</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$store</span>.<span class="property">state</span>.<span class="property">xxx</span> <span class="comment">// mapState 取值</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>Getter：借助 Vue 的计算属性 computed 来实现缓存</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$store</span>.<span class="property">getters</span>.<span class="property">xxx</span> <span class="comment">// mapGetters 取值</span></span><br></pre></td></tr></table></figure>

<ol start="3">
<li>Mutation：更改 state 方法(同步获取数据)</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">commit</span>(<span class="string">&#x27;xxx&#x27;</span>) <span class="comment">// mapMutations 赋值</span></span><br></pre></td></tr></table></figure>

<ol start="4">
<li>Action：触发 mutation 方法(异步数据获取)</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">dispatch</span>(<span class="string">&#x27;xxx&#x27;</span>) <span class="comment">// mapActions 赋值</span></span><br></pre></td></tr></table></figure>



<h3 id="获取全局的的写法"><a href="#获取全局的的写法" class="headerlink" title="获取全局的的写法"></a>获取全局的的写法</h3><ul>
<li>以Action 异步数据获取 为案例<ul>
<li>获取user的Vuex文件下的 getInfo方法</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$this.<span class="property">store</span>.<span class="title function_">dispatch</span>(<span class="string">&#x27;user/getInfo&#x27;</span>,<span class="string">&#x27;可以设置参数 看情况&#x27;</span>)  <span class="comment">// 获取user的Vuex文件下的 getInfo方法</span></span><br></pre></td></tr></table></figure>

<h2 id="Vue文件外-调用Vuex组件-js文件-commit"><a href="#Vue文件外-调用Vuex组件-js文件-commit" class="headerlink" title="Vue文件外 调用Vuex组件 (js文件) commit"></a>Vue文件外 调用Vuex组件 (js文件) <code>commit</code></h2><p><a target="_blank" rel="noopener" href="https://vuex.vuejs.org/zh/guide/mutations.html">官方commit api介绍</a></p>
<ul>
<li>导入Vuex的实例化对象 通过<code>commit </code>的Vuex提供api方法 操作Vuex组件</li>
<li><code>store.commit(&#39;user/deluserInfo&#39;) </code> 操作 user文件里面的 deluserInfo 方法</li>
</ul>
<blockquote>
<p>案例是store.commit 是Mutation：更改 state 方法</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入 Vuex的实例化对象</span></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;../store/index&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//-------------------------------- Vue组件外 调用Vuex</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">// 导入Vuex的实例化对象后 在组件外操作Vuex</span></span><br><span class="line"><span class="comment">// Vue组件外 不需要写 this.$store </span></span><br><span class="line">    store.<span class="title function_">commit</span>(<span class="string">&#x27;user/deluserInfo&#x27;</span>) <span class="comment">// 操作 user文件里面的 deluserInfo 方法</span></span><br></pre></td></tr></table></figure>



<h1 id="Vue3-中的Vuex"><a href="#Vue3-中的Vuex" class="headerlink" title="Vue3 中的Vuex"></a>Vue3 中的Vuex</h1><h2 id="Vue3-获取Vuex里面的数据"><a href="#Vue3-获取Vuex里面的数据" class="headerlink" title="Vue3 获取Vuex里面的数据"></a>Vue3 获取Vuex里面的数据</h2><ul>
<li>Vue3不可以用this 所以 获取Vuex里面的数据 不需要添加this</li>
</ul>
<blockquote>
<p>Vue3的实例化方法导入</p>
</blockquote>
<ul>
<li>Vue3必须先导入Vuex组件 才能调用Vuex的数据</li>
<li>导入Vuex后再<code>setup()</code>中实例化Vuex组件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入Vuex的组件 Vue3必须先导入Vuex组件 才能调用Vuex的数据</span></span><br><span class="line"><span class="keyword">import</span> &#123; useStore &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="comment">// 在setup ()中实例化Vuex组件</span></span><br><span class="line"><span class="keyword">const</span> store = <span class="title function_">useStore</span>()</span><br></pre></td></tr></table></figure>

<blockquote>
<p>如果是Vue3 无需设置this</p>
</blockquote>
<ul>
<li><font color =#ff3040>注意: 如果在<code>template</code>模板中 需要用$ 在<code>setup()</code>中导入Vuex后不需要</font><ul>
<li>Vue3调用Vuex需要先导入Vuex组件 并且需要 实例化导入的Vuex组件</li>
<li>模板中导入state数据需要<code> $</code></li>
<li>setup() 使用Vuex 不需要 this 和 <code>$</code></li>
</ul>
</li>
</ul>
<ol>
<li>State: 提供一个响应式数据</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">store.<span class="property">state</span>.<span class="property">xxx</span> <span class="comment">// mapState 取值</span></span><br></pre></td></tr></table></figure>

<ul>
<li>拆分模块后 调用某个Vuex文件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">store.<span class="property">state</span>.拆分模块的文件名(名称).调用的state名称 <span class="comment">// 在拆分模块中使用</span></span><br></pre></td></tr></table></figure>

<br>

<ol start="2">
<li>Getter：借助 Vue 的计算属性 computed 来实现缓存</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">store.<span class="property">getters</span>.<span class="property">xxx</span> <span class="comment">// mapGetters 取值</span></span><br></pre></td></tr></table></figure>

<ul>
<li>拆分模块后 调用某个Vuex文件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">store.<span class="property">getters</span>.拆分模块的文件名(名称).调用的state名称 <span class="comment">// 在拆分模块中使用</span></span><br></pre></td></tr></table></figure>

<br>

<ol start="3">
<li>Mutation：更改 state 方法(同步获取数据)</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">store.<span class="title function_">commit</span>(<span class="string">&#x27;Mutation方法&#x27;</span>,传递的数据) <span class="comment">// Mutation 赋值</span></span><br></pre></td></tr></table></figure>

<ul>
<li>拆分模块后 调用某个Vuex文件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">store.<span class="title function_">commit</span>(<span class="string">&#x27;拆分模块的文件名.Mutation方法&#x27;</span>,传递的数据) <span class="comment">// 在拆分模块中使用</span></span><br></pre></td></tr></table></figure>

<br>

<ol start="4">
<li><p>Action：触发 mutation 方法(异步数据获取)</p>
<ul>
<li>通常不用写 传递的数据</li>
</ul>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">store.<span class="title function_">dispatch</span>(<span class="string">&#x27;Action方法&#x27;</span>,传递的数据) <span class="comment">// Action 赋值</span></span><br></pre></td></tr></table></figure>

<ul>
<li>拆分模块后 调用某个Vuex文件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">store.<span class="title function_">dispatch</span>(<span class="string">&#x27;拆分模块的文件名.Action方法&#x27;</span>,传递的数据) <span class="comment">// 在拆分模块中使用</span></span><br></pre></td></tr></table></figure>

<h3 id="Vue3调用Vuex的数据"><a href="#Vue3调用Vuex的数据" class="headerlink" title="Vue3调用Vuex的数据"></a>Vue3调用Vuex的数据</h3><ul>
<li>Vue3调用Vuex需要先导入Vuex组件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入Vuex的组件 Vue3必须先导入Vuex组件 才能调用Vuex的数据</span></span><br><span class="line"><span class="keyword">import</span> &#123; useStore &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>并且需要 实例化导入的Vuex组件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">setup () &#123;</span><br><span class="line">   <span class="comment">// 在setup ()中实例化Vuex组件</span></span><br><span class="line">   <span class="keyword">const</span> store = <span class="title function_">useStore</span>()</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>演示案例</p>
</blockquote>
<ul>
<li>Vue文件 调用Vuex中的数据<ul>
<li>Vue3调用Vuex需要先导入Vuex组件 并且需要 实例化导入的Vuex组件</li>
<li>模板中导入state数据需要<code> $</code></li>
<li>setup() 使用Vuex 不需要 this 和 <code>$</code></li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 模板直接调用Vuex里面的state数据(模板中导入 需要$) --&gt;</span><br><span class="line">  &lt;div&gt;&#123;&#123;$store.state.info&#125;&#125;&lt;/div&gt;</span><br><span class="line">   &lt;!-- 点击后触发Vuex的mutations和actions 获取数据 --&gt;</span><br><span class="line">  &lt;button @click=&#x27;handleClick&#x27;&gt;点击&lt;/button&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">// 导入Vuex的组件 Vue3必须先导入Vuex组件 才能调用Vuex的数据</span><br><span class="line">import &#123; useStore &#125; from &#x27;vuex&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;App&#x27;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    // 在setup ()中实例化Vuex组件</span><br><span class="line">    const store = useStore()</span><br><span class="line">    // 把Vuex的数据 储存起来</span><br><span class="line">    const rets = store.state.info</span><br><span class="line">    const handleClick = () =&gt; &#123;</span><br><span class="line">      console.log(rets)</span><br><span class="line">      // 调用 mutations修改数据</span><br><span class="line">      store.commit(&#x27;updateInfo&#x27;, &#x27;hi&#x27;)</span><br><span class="line">      // 调用 actions获取异步数据方法</span><br><span class="line">      store.dispatch(&#x27;updateInfo&#x27;, &#x27;你好&#x27;)</span><br><span class="line">    &#125;</span><br><span class="line">    return &#123; handleClick &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>需要调用的Vuex文件 (js)<ul>
<li>mutations 里面的两个参数: state参数是操作state里面的数据  payload是接收传来的数据</li>
<li>actions 里面的两个参数: context参数是操作mutations里面的方法(context.commit)  payload是接收传来的数据<ul>
<li>通常在actions 只用一个参数context 把服务器获取到的数据 传入mutations 中 不需要payload是接收传来的数据</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createStore &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建vuex仓库并导出</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">createStore</span>(&#123;</span><br><span class="line">  <span class="attr">state</span>: &#123;</span><br><span class="line">    <span class="comment">// 数据</span></span><br><span class="line">    <span class="attr">info</span>: <span class="string">&#x27;测试数据&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">mutations</span>: &#123;</span><br><span class="line">    <span class="comment">// 改数据函数</span></span><br><span class="line">    updateInfo (state, payload) &#123; <span class="comment">// state参数是操作state里面的数据 payload是接收传来的数据</span></span><br><span class="line">      state.<span class="property">info</span> = payload</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">actions</span>: &#123;</span><br><span class="line">    <span class="comment">// 请求数据函数</span></span><br><span class="line">    updateInfo (context, payload) &#123; <span class="comment">// context参数是操作mutations里面的方法(context.commit) payload是接收传来的数据</span></span><br><span class="line">      <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        context.<span class="title function_">commit</span>(<span class="string">&#x27;updateInfo&#x27;</span>, payload)</span><br><span class="line">      &#125;, <span class="number">1000</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">modules</span>: &#123;</span><br><span class="line">    <span class="comment">// 分模块</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">getters</span>: &#123;</span><br><span class="line">    <span class="comment">// vuex的计算属性</span></span><br><span class="line">    fullInfo (state) &#123;</span><br><span class="line">      <span class="keyword">return</span> state.<span class="property">info</span> + <span class="string">&#x27; tom&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="Vue3-拆分Vuex模块"><a href="#Vue3-拆分Vuex模块" class="headerlink" title="Vue3 拆分Vuex模块"></a>Vue3 拆分Vuex模块</h2><ul>
<li>模块拆分分为 全局模块文件 和 局部模块文件 然后整合导入到一个 入口文件中 (三个文件)</li>
</ul>
<blockquote>
<p>演示案例</p>
</blockquote>
<ul>
<li>局部Vuex模块 (cart.js)<ul>
<li>设置 <code>namespaced: true</code> 就是局部模块</li>
<li>state采取函数模式(仅限局部)</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 设置局部Vuex模块</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="comment">// 设置为局部Vuex</span></span><br><span class="line">  <span class="attr">namespaced</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="comment">// state采取函数模式(仅限局部)</span></span><br><span class="line">  <span class="attr">state</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">title</span>: <span class="string">&#x27;拆分模块&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">mutations</span>: &#123;&#125;,</span><br><span class="line">  <span class="attr">actions</span>: &#123;&#125;,</span><br><span class="line">  <span class="attr">getters</span>: &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>全局Vuex模块(global.js)<ul>
<li>不设置 <code>namespaced: true</code>就是全局模块</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 全局模块 不设置 namespaced: true,</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">state</span>: &#123;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">getters</span>: &#123;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">mutations</span>: &#123;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">actions</span>: &#123;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>Vuex入口文件 导入配置 全局Vuex模块 和 局部Vuex模块 (index.js)</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入Vuex</span></span><br><span class="line"><span class="keyword">import</span> &#123; createStore &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="comment">// 导入全局Vuex组件</span></span><br><span class="line"><span class="keyword">import</span> <span class="variable language_">global</span> <span class="keyword">from</span> <span class="string">&#x27;./modules/global&#x27;</span></span><br><span class="line"><span class="comment">// 导入局部的Vuex组件</span></span><br><span class="line"><span class="keyword">import</span> user <span class="keyword">from</span> <span class="string">&#x27;./modules/user&#x27;</span></span><br><span class="line"><span class="keyword">import</span> cart <span class="keyword">from</span> <span class="string">&#x27;./modules/cart&#x27;</span></span><br><span class="line"><span class="comment">// ------------------------------------</span></span><br><span class="line"><span class="comment">// 创建vuex仓库并导出</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">createStore</span>(&#123;</span><br><span class="line">  <span class="comment">// 全局的Vuex模块导入 直接 ...导入即可(展开语法)</span></span><br><span class="line">  ...<span class="variable language_">global</span>,</span><br><span class="line">  <span class="attr">modules</span>: &#123;</span><br><span class="line">    <span class="comment">// 局部的Vuex模块导入</span></span><br><span class="line">    user,</span><br><span class="line">    cart</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="调用拆分的Vuex局部组件数据"><a href="#调用拆分的Vuex局部组件数据" class="headerlink" title="调用拆分的Vuex局部组件数据"></a>调用拆分的Vuex局部组件数据</h3><blockquote>
<p>演示案例 </p>
</blockquote>
<ul>
<li>Vue3文件调用Vuex的数据<ul>
<li>template模板中 调用Vuex数据 需要 <code>$</code></li>
<li>script脚本中 需要先导入Vuex组件 并且实例化Vuex组件<ul>
<li>调用Vuex数据 不需要<code>this</code> <code>$</code> 直接调用即可</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 模板导入拆分的局部组件数据 --&gt;</span><br><span class="line">  &lt;div&gt;&#123;&#123;$store.state.cart.title&#125;&#125;&lt;/div&gt;</span><br><span class="line">  &lt;button @click=&quot;changMutations&quot;&gt;点击&lt;/button&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">// 导入Vuex的组件 Vue3必须先导入Vuex组件 才能调用Vuex的数据</span><br><span class="line">import &#123; useStore &#125; from &#x27;vuex&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;App&#x27;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    // 实例化Vuex组件</span><br><span class="line">    const store = useStore()</span><br><span class="line">    const changMutations = () =&gt; &#123;</span><br><span class="line">      // 获取Vuex局部模块的 state里的数据</span><br><span class="line">      const ret = store.state.cart.title</span><br><span class="line">      console.log(ret)</span><br><span class="line">      // 调用Vuex局部模块的 mutations</span><br><span class="line">      // store.commit(&#x27;局部文件名/Vuex里的mutations方法名&#x27;, &#x27;需要传入的数据&#x27;)</span><br><span class="line">      store.commit(&#x27;cart/updataTile&#x27;, &#x27;传入的数据&#x27;)</span><br><span class="line">      // 调用Vuex局部模块的 actions</span><br><span class="line">      // store.dispatch(&#x27;局部文件名/Vuex里的actions方法名&#x27;, &#x27;需要传入的数据&#x27;)</span><br><span class="line">      store.dispatch(&#x27;cart/updataTile&#x27;, &#x27;传入的数据&#x27;)</span><br><span class="line">    &#125;</span><br><span class="line">    return &#123; changMutations &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style lang=&quot;less&quot;&gt;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>为了防止单个模块过于臃肿，可以进行store的模块拆分，方便后期维护</li>
<li>拆分为全局模板和局部模块</li>
</ol>
<h3 id="生命周期中-页面打开时候-获取Vuex数据-onMounted"><a href="#生命周期中-页面打开时候-获取Vuex数据-onMounted" class="headerlink" title="生命周期中 页面打开时候 获取Vuex数据 onMounted"></a>生命周期中 页面打开时候 获取Vuex数据 <code>onMounted</code></h3><h2 id="Vue3-持久化Vuex的数据"><a href="#Vue3-持久化Vuex的数据" class="headerlink" title="Vue3 持久化Vuex的数据"></a>Vue3 持久化Vuex的数据</h2><blockquote>
<p>目的：让在vuex中管理的状态数据同时存储在本地。可免去自己存储的环节。</p>
</blockquote>
<ul>
<li>在开发的过程中，像用户信息（名字，头像，token）需要vuex中存储且需要本地存储。</li>
<li>再例如，购物车如果需要未登录状态下也支持，如果管理在vuex中页需要存储在本地。</li>
<li>我们需要category模块存储分类信息，但是分类信息不需要持久化。</li>
</ul>
<blockquote>
<p>(1）首先：我们需要安装一个vuex的插件<code>vuex-persistedstate</code>来支持vuex的状态持久化。</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i vuex-persistedstate</span><br></pre></td></tr></table></figure>

<blockquote>
<p>(2) 在Vuex入口文件中配置 <code>index.js</code></p>
</blockquote>
<ul>
<li>默认储存在local Storage缓存中(生命周期是永久的)</li>
</ul>
<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">// 导入Vuex</span><br><span class="line">import &#123; createStore &#125; from &#x27;vuex&#x27;</span><br><span class="line">// 导入全局Vuex组件</span><br><span class="line">import global from &#x27;./modules/global&#x27;</span><br><span class="line">// 导入局部的Vuex组件</span><br><span class="line">import user from &#x27;./modules/user&#x27;</span><br><span class="line">import cart from &#x27;./modules/cart&#x27;</span><br><span class="line">import cate from &#x27;./modules/cate&#x27;</span><br><span class="line"><span class="addition">+ // 导入持久化的Vuex插件</span></span><br><span class="line"><span class="addition">+ import createPersistedstate from &#x27;vuex-persistedstate&#x27;</span></span><br><span class="line">// ------------------------------------</span><br><span class="line">// 创建vuex仓库并导出</span><br><span class="line">export default createStore(&#123;</span><br><span class="line">  // 全局的Vuex模块导入 直接 ...导入即可(展开语法)</span><br><span class="line">  ...global,</span><br><span class="line">  modules: &#123;</span><br><span class="line">    // 局部的Vuex模块导入</span><br><span class="line">    user,</span><br><span class="line">    cart,</span><br><span class="line">    cate</span><br><span class="line">  &#125;,</span><br><span class="line"><span class="addition">+  // 配置导入的Vuex插件</span></span><br><span class="line"><span class="addition">+  plugins: [</span></span><br><span class="line"><span class="addition">+    // 默认储存在local Storage缓存中(生命周期是永久的)</span></span><br><span class="line"><span class="addition">+    createPersistedstate(&#123;</span></span><br><span class="line"><span class="addition">+      // key是储存在缓存中的数据名称(储存数据的键名)</span></span><br><span class="line"><span class="addition">+      key: &#x27;erabbit-client-pc-store-128&#x27;,</span></span><br><span class="line"><span class="addition">+      // paths是存储state中需要持久化的数据(Vuex模块的名称)</span></span><br><span class="line"><span class="addition">+      // 如果是模块下具体的数据需要加上模块名称，如user.token(储存指定数据)</span></span><br><span class="line"><span class="addition">+      paths: [&#x27;user&#x27;, &#x27;cart&#x27;, &#x27;cate&#x27;]</span></span><br><span class="line"><span class="addition">+    &#125;)</span></span><br><span class="line"><span class="addition">+  ]</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><font color =#ff3040><strong>注意：</strong></font></p>
<ul>
<li>默认储存在local Storage缓存中(生命周期是永久的)</li>
<li>key是储存在缓存中的数据名称(储存数据的键名)</li>
<li>paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如<code>user.token</code></li>
<li>修改state后触发才可以看到本地存储数据的的变化。(修改后才会进行持久化)</li>
</ul>
<hr>

<p>总结：</p>
<ol>
<li>基于第三方包实现vuex中的数据的持久化</li>
<li>触发持久化的条件是state发生变化 (修改后才会进行持久化)</li>
</ol>

        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5>本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://cuishikang.gitee.io/2021/06/29/Vue/2_Vuex/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://cuishikang.gitee.io/2021/06/29/Vue/2_Vuex/";
            const title         = "「Vuex 的食用方法」";
            const excerpt       = `::: tip 介绍Vuex 的操作流程:::`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/Vue/" rel="tag">Vue</a>, <a class="tag-none-link" href="/tags/Vuex/" rel="tag">Vuex</a>
                </div>
                <div class="pull-date">
                <span>最后编辑：2022-02-19</span>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" 路由导航守卫(访问权限 白名单)" href="/2021/06/26/axios/axios_router/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" Vue2 install插件案例" href="/2021/06/30/Vue/3_Vue_install/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="https://gitee.com/cuishikang/tmp/raw/master/img/20220220194141.png" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                91
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                13
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                33
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Css/">Css</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/RABC/">RABC</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vscode/">Vscode</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">25</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue%E7%A7%BB%E5%8A%A8%E5%A4%B4%E6%9D%A1%E9%A1%B9%E7%9B%AE/">Vue移动头条项目</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/axios/">axios</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/other/">other</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/uniapp/">uniapp</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue-element-admin/">vue-element-admin</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Css/" style="font-size: 0.66em;">Css</a> <a href="/tags/H5Video/" style="font-size: 0.6em;">H5Video</a> <a href="/tags/JavaScript/" style="font-size: 0.74em;">JavaScript</a> <a href="/tags/My-project/" style="font-size: 0.6em;">My project</a> <a href="/tags/QQ/" style="font-size: 0.6em;">QQ</a> <a href="/tags/RABC/" style="font-size: 0.6em;">RABC</a> <a href="/tags/Vant/" style="font-size: 0.71em;">Vant</a> <a href="/tags/VeeValidate/" style="font-size: 0.6em;">VeeValidate</a> <a href="/tags/Vscode/" style="font-size: 0.6em;">Vscode</a> <a href="/tags/Vue/" style="font-size: 0.8em;">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 0.6em;">Vue Router</a> <a href="/tags/Vue3/" style="font-size: 0.77em;">Vue3</a> <a href="/tags/Vuex/" style="font-size: 0.6em;">Vuex</a> <a href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 0.74em;">Vue移动端</a> <a href="/tags/Windows/" style="font-size: 0.6em;">Windows</a> <a href="/tags/animation/" style="font-size: 0.63em;">animation</a> <a href="/tags/axios/" style="font-size: 0.69em;">axios</a> <a href="/tags/echarts/" style="font-size: 0.6em;">echarts</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2111/02/19/JavaScript/5_algorithm_tree/"><i class="fa  fa-book"></i> JavaScript树形数据转换算法</a>
            
          
        
          
          
            <a class="list-group-item" href="/2099/01/27/Vue3/1.1.1_Vue_study/"><i class="fa  fa-book"></i> Vue3 学习手册(博客版)</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/28/JavaScript/0.2_scroll/"><i class="fa  fa-book"></i> JS 滚动到指定位置和回到顶部</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/23/Vue/5_Vue_nextTick/"><i class="fa  fa-book"></i> 理解$nextTick</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/20/hello-world/"><i class="fa  fa-book"></i> Hello World</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        
                        
                        <li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
                        
                        
                        
                        <li><a target="_blank" rel="me" href="https://nya.one/@Candinya"><i class="fa fa fa-share-alt-square"></i></a></li>
                        <li><a target="_blank" rel="nofollow" href="https://github.com/Candinya"><i class="fa fa-github"></i></a></li>
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2022 小崔的博客 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by cuishikang.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="https://unpkg.com/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="song"
        id="1375305989"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="https://unpkg.com/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>


    <script defer src="/js/kr-dark.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>